<template>
    <div>
        <div class="header">
            <div class="title">设备结构</div>
        </div>
        <tree
            :data="isShowComponent ? maintenanceStore.treeData : maintenanceStore.reportTreeData"
            ref="treeCpnRef"
            @handlerNode="handlerNode"
            placeholder="请输入设备名称"
            :treeProps="treeProps"
            :currentKey="maintenanceStore.treeSelectNode.id"
            :expandedKey="maintenanceStore.treeSelectNode.expanded"
        >
            <template #default="{ scope }">
                <div class="custom-tree-node">
                    <template v-if="!scope.data.childs.length">
                        <i class="iconfont icon-wenjian icon"></i>
                        <img src="@/assets/image/report/child.png" class="child-img" />
                    </template>
                    <template v-else>
                        <img src="@/assets/image/report/parent.png" class="parent-img" />
                    </template>
                    <span class="label">{{ scope.data.name }}</span>
                    <template v-if="isShowComponent">
                        <div class="hot" v-if="scope.data.hot && maintenanceStore.stateOperation !== 1">{{ scope.data.hot }}</div>
                        <i class="iconfont icon-zhengchang" v-if="scope.data.isShowCross && maintenanceStore.stateOperation !== 1" style="color: #c5e76d; margin-left: 3px"></i>
                        <i class="iconfont icon-yujing" v-if="scope.data.isShowChoose && maintenanceStore.stateOperation !== 1" style="color: #ffde92; margin-left: 3px"></i>
                    </template>
                    <template v-else>
                        <span class="sub-title">{{ scope.data.leftHot }}/{{ scope.data.rightHot }}</span>
                    </template>
                </div>
            </template>
        </tree>
    </div>
</template>

<script setup>
import tree from "@/components/tree.vue";
import { useMaintenance } from "@/store/maintenance.js";
import treeIcon from "@/components/treeIcon.vue";
import { ref } from "vue";

const props = defineProps({
    treeData: {
        type: Object,
        default: () => ({})
    },
    isShowComponent: {
        type: Boolean,
        default: true
    }
});
const treeCpnRef = ref(null);
const maintenanceStore = useMaintenance();
const treeProps = { label: "name", children: "childs" };
const emits = defineEmits(["handlerNode"]);
const handlerNode = (_, node) => {
    emits("handlerNode", node);
};

defineExpose({
    treeCpnRef
});
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    .title {
        font-weight: 600;
        color: #1b3646;
    }
}
.custom-tree-node {
    display: flex;
    align-items: center;
    .icon {
        position: relative;
        margin-right: 7px;
        font-size: 14px;
        color: #ebebeb;
    }
    .select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        color: #ebebeb;
    }
    .child-img {
        width: 15px;
        height: 16px;
    }
    .parent-img {
        width: 18px;
        height: 17px;
    }
    .label {
        margin-left: 9px;
    }
    .hot {
        margin-left: 4px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        border-radius: 50%;
        font-size: 10px;
        background-color: #ffdbdc;
        color: #ff4d4f;
    }
    .sub-title {
        margin-left: 4px;
        color: #ff4d4f;
        font-size: 10px;
    }
}
</style>
